<!doctype html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>编辑设备</title>
	<link rel="stylesheet" href="./asset/css/components.css" />
	<link rel="stylesheet" href="./asset/css/bootstrap.css" />
	<link rel="stylesheet" href="./asset/css/plugins.css" />
	<link rel="stylesheet" href="./asset/css/main.css" />
	<link rel="stylesheet" href="./asset/css/themes.css" />
	<link rel="stylesheet" href="./asset/layui/css/layui.css" />
</head>

<body>
	<div id="body">
		<div id="app">
			<div class="tabbody">
				<div class="bodyli active">
					<div class="inputbox">
						<span class="title">设备名称</span>
						<div class="inputright">
							<input type="text" id="equipname" v-model="equipname" class="form-control input-sm"
								placeholder="请输入设备名称">
						</div>
					</div>
					<div class="inputbox">
						<span class="title">设备类型</span>
						<div class="inputright">
							<select class="form-control" id="cateid" v-model="cateid">
								<option :value="0">---请选择设备类型---</option>
								<option :value="item.cateid" v-for="item in cate">{{ item.catename }}</option>
							</select>
						</div>
					</div>
					<div class="inputbox">
						<span class="title">所在实验室</span>
						<div class="inputright">
							<select class="form-control" id="labxid" v-model="labxid">
								<option :value="0">---请选择所在实验室---</option>
								<option :value="item.labxid" v-for="item in labx">{{ item.labxname }}</option>
							</select>
						</div>
					</div>
					<div class="inputbox">
						<span class="title">设备作用</span>
						<div class="inputright">
							<input type="text" id="useinfo" v-model="useinfo" class="form-control input-sm"
								placeholder="请输入设备作用">
						</div>
					</div>
					<div class="inputbox">
						<span class="title">生产厂商</span>
						<div class="inputright">
							<input type="text" id="productor" v-model="productor" class="form-control input-sm"
								placeholder="请输入生产厂商">
						</div>
					</div>
					<div class="inputbox">
						<span class="title">采购金额</span>
						<div class="inputright">
							<input type="text" id="price" v-model="price" class="form-control input-sm"
								placeholder="请输入采购金额">
						</div>
					</div>
					<div class="inputbox">
						<span class="title">采购日期</span>
						<div class="inputright">
							<input type="text" id="buydate" v-model="buydate" class="form-control input-sm"
								placeholder="请输入采购日期" @click="getDate7()" readonly="readonly" autocomplete="off">
						</div>
					</div>
					<div class="inputbox">
						<span class="title">负责人</span>
						<div class="inputright">
							<input type="text" id="manager" v-model="manager" class="form-control input-sm"
								placeholder="请输入负责人">
						</div>
					</div>
					<div class="inputbox">
						<span class="title">备注</span>
						<div class="inputright">
							<input type="text" id="memo" v-model="memo" class="form-control input-sm"
								placeholder="请输入备注">
						</div>
					</div>
					<div class="tbfooter">
						<button class="btn btn-success" @click.prevent="update()"><i class="fa fa-floppy-o"></i>
							提交保存</button>
						&nbsp;&nbsp;&nbsp;
						<button class="btn btn-default" @click.prevent="reset()"><i class="fa fa-recycle"></i>
							取消重置</button>
					</div>
				</div>
			</div>
		</div>
	</div>	
</body>

<script type="text/javascript" src="./asset/js/jquery.min.js"></script>
<script type="text/javascript" src="./asset/layui/layui.js"></script>
<script type="text/javascript" src="./asset/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./asset/js/axios.min.js"></script>
<script type="text/javascript" src="./asset/js/vue.js"></script>
<script type="text/javascript">
	const vue = new Vue({
		el: '#app',// 绑定作用域
		data: { //定义数据用于vue的双向绑定
			equipid: '',
			eno: '', // 设备号
			equipname: '', // 设备名称
			cateid: '', // 设备类型
			labxid: '', // 所在实验室
			useinfo: '', // 设备作用
			productor: '', // 生产厂商
			price: '', // 采购金额
			buydate: '', // 采购日期
			manager: '', // 负责人
			memo: '', // 备注
			cate: {},// 用来保存设备类型对象数据
			labx: {},// 用来保存所在实验室对象数据
		},
		methods: {
			getUrlParam: function () {
				var name, value;
				var str = location.href; // 取得整个地址栏
				var num = str.indexOf("?"); // 定位参数起始位置
				str = str.substr(num + 1); // 取得所有参数 
				var arr = str.split("&"); // 各个参数放到数组里
				for (var i = 0; i < arr.length; i++) {
					num = arr[i].indexOf("=");
					if (num > 0) {
						name = arr[i].substring(0, num);
						value = arr[i].substr(num + 1);
						this.equipid = value; // 确认主键参数
					}
				}
			},
			loadPage: function () {
				let _this = this;
				axios.get('http://127.0.0.1:8080/equipment/equip/getEquipById.action?id=' + _this.equipid).then(result => {
					_this.eno = result.data.eno;
					_this.equipname = result.data.equipname;
					_this.cateid = result.data.cateid;
					_this.labxid = result.data.labxid;
					_this.useinfo = result.data.useinfo;
					_this.productor = result.data.productor;
					_this.price = result.data.price;
					_this.buydate = result.data.buydate;
					_this.manager = result.data.manager;
					_this.memo = result.data.memo;
					axios.get('http://127.0.0.1:8080/equipment/cate/getAllCate.action').then(result => {
						_this.cate = result.data;
					});
					axios.get('http://127.0.0.1:8080/equipment/labx/getAllLabx.action').then(result => {
						_this.labx = result.data;
					});
				});
			},
			reset: function () {
				this.loadPage();
			},
			update: function () {
				let _this = this;
				var data = {
					equipid: _this.equipid,
					eno: _this.eno,
					equipname: _this.equipname,
					cateid: _this.cateid,
					labxid: _this.labxid,
					useinfo: _this.useinfo,
					productor: _this.productor,
					price: _this.price,
					buydate: _this.buydate,
					manager: _this.manager,
					memo: _this.memo,
				};
				axios.post('http://127.0.0.1:8080/equipment/equip/updateEquip.action', data).then(result => {
					if (result.data.code > 0) {
						var index = parent.layer.getFrameIndex(window.name);
						parent.location.reload();
						parent.layer.close(index);
					} else {
						alert('修改失败');
					}
				});
			},
			getDate7: function () { // 日历点击事件
				var _this = this;
				var laydate = layui.laydate;
				laydate.render({
					elem: '#buydate',
					show: true,
					done: function (value) {
						_this.buydate = value;
					}
				})
			},

		},

		created() { // 生命周期相关的函数
			this.getUrlParam();
			this.loadPage();
			let _this = this;
		},
	})
</script>

</html>